var oldui = 0;
var page = 2;
var stop = false;
var _scrollbar = function() {
	if ($('#ihm-content-listing li').length > 20){  
	//change the main div to overflow-hidden as we can use the slider now
	$('#ihm-content').css('overflow','hidden');
	$("#ihm-content .content").css('height', parseInt((($('#ihm-content-listing li').eq(0).height() +3)  * $('#ihm-content-listing li').length)) + 100);
	$("#ihm-scrollbar").css('height', $(".ihm-listing").height()-($('#ihm-pathfinder').height() + 15));
	
	//calculate the height that the scrollbar handle should be
	var difference = $("#ihm-content .content").height()-($("#ihm-content").height());//eg it's 200px longer 
	var proportion = difference / $("#ihm-content .content").height();//eg 200px/500px
	var handleHeight = Math.round((1-proportion)*$("#ihm-content").height());//set the proportional height - round it to make sure everything adds up correctly later on
	handleHeight -= handleHeight%2; //ensure the handle height is exactly divisible by two
	
	$("#ihm-scrollbar").slider({
      orientation: 'vertical',
      value: 100,
  		range: parseInt($('#ihm-content-listing li').eq(0).height() +3),
	   slide: function(event, ui) {
    	 var topValue = -((100-(ui.value))*difference/100);
         $("#ihm-content .content").css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
     	 _counter = $('span.path-element-counter:visible').eq($('span.path-element-counter:visible').length-1).find('em').eq(0).html();
     	 _test = (Math.ceil(_counter/500) >= page);
     	 if (_test && stop == false) {
        	 if(((100-(ui.value))*difference/100) >= difference){
        		 	 $.ajax({
		   		   	async:true,
		   		   	url: $('#ihm-content-listing').attr('old-query') + '/page/' + page,
		   		   	beforeSend: function () {
		   				wait_block('ihm-scrollbar', '');
		   				oldui = ui.value;
		   		   	},
		   		   	success: function (message, status) {
		   		   		if ($.trim(message) == '') {
		   		   			// stop scrollbar
		   		   			stop = true;
		   		    	}
		   		    	else {
		   				    if (message != $('#ihm-content-listing').html()) {
		   						$('#ihm-content-listing').append(message);
		   					}
		   				}
		   		    	
		   		   	},
		   		   	complete: function () {
		   		   		_scrollbar();
		   		   		$("#ihm-scrollbar").slider( "value", ui.value+20 );
		   		   	}
		   		});
        		page = page+1;
	         }
     	 }
      }
    });

	//set the handle height and bottom margin so the middle of the handle is in line with the slider
	$("#ihm-scrollbar .ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
		
	var origSliderHeight = $("#ihm-scrollbar").height();//read the original slider height
	var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height
	var sliderMargin =  ((origSliderHeight - sliderHeight)*0.5) + 5;//so the slider needs to have both top and bottom margins equal to half the difference
	$("#ihm-scrollbar ").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins
	}
};